<template>
  <AppLayout>
    <!-- 商品图片轮播 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="i in 5">
        <view class="swiper-item">
          <image src="/static/goods/putao.png"/>
        </view>
      </swiper-item>
    </swiper>
    <!-- 基础信息 -->
    <view class="base-info">
      <view class="price">
        <text>218.00</text>
        <button type="primary" size="mini">立即购买</button>
      </view>
      <text class="goods-name">日本晴王葡萄 香印青提 阳光玫瑰提子新鲜水果 日本引种4斤礼盒装顺丰 特级2斤礼盒装 特级3斤礼盒装</text>
    </view>
    <!-- 已选/配送信息 -->
    <view class="delivery-info">
      <view>
        <text class="info-label">已选</text>
        <text class="info-content">特级3斤礼盒装，1个</text>
      </view>
      <view>
        <text class="info-label">送至</text>
        <text class="info-content">北京朝阳区三环到四环之间</text>
      </view>
      <view>
        <text class="info-label">运费</text>
        <text class="info-content">在线支付免运费</text>
      </view>
    </view>
    <!-- 商品详情 -->
    <view class="details">
      <text class="title">商品详情</text>
      <view class="details-content">
        商品详情内容（略），可采用图片或富文本的方式进行展示。
      </view>
    </view>
  </AppLayout>
</template>

<script>
  import AppLayout from '@/layouts/AppLayout'
  export default {
    components: { AppLayout }
  }
</script>

<style lang="scss">
  @import "../../style/variables";

  // 图片轮播
  $swiper-width: 750rpx;
  $swiper-height: 750rpx;
  swiper {
    width: $swiper-width;
    height: $swiper-height;

    .swiper-item {
      text-align: center;
    }

    image {
      width: $swiper-width;
      height: $swiper-height;
    }
  }

  // 基础信息
  .base-info {
    background-color: $background-color-module;
    padding: $gap-middle;
    // 价格
    .price {
      color: $primary-color;
      font-size: 52rpx;
      font-weight: bold;
      padding: $gap 0;

      &::before {
        content: '¥';
        font-size: $font-size-mini;
        margin-right: $gap-mini;
      }

      // 立即购买按钮
      button {
        display: inline-block;
        border-radius: 35rpx;
        float: right;
        margin-top: -6rpx;
        background-color: $primary-color;
        height: 70rpx;
        line-height: 70rpx;
      }
    }

    // 标题
    .goods-name {
      font-weight: bold;
      font-size: $font-size-middle;
      color: #333;
    }
  }
  // 已选/配送信息
  .delivery-info {
    background-color: $background-color-module;
    padding: $gap-middle;
    margin-top: $gap;

    & > view {
      border-bottom: 1px solid #f7f7f7;
      padding: $gap 0;

      .info-label {
        font-weight: bold;
      }

      .info-content {
        padding: 0 $gap-mini;
      }

      &:last-of-type {
        border-bottom: 0;
      }
    }
  }
  // 商品详情
  .details {
    background-color: $background-color-module;
    padding: $gap-middle;
    margin-top: $gap;

    .title {
      font-weight: bold;
      border-bottom: 1px solid #f7f7f7;
      padding: $gap-mini 0;
    }

    .details-content {
      padding: $gap-mini 0;
      font-size: $font-size-mini;
    }
  }
</style>
